<template>
  <div class="before-after-slider" :style="containerStyle">
    <!-- 有对比图片时显示滑动效果 -->
    <template v-if="beforeImage && afterImage && beforeImage !== afterImage">
      <!-- 后图（底层） -->
      <img
        :src="afterImage"
        :alt="afterAlt || '处理后'"
        class="slider-image slider-image--after"
      />
      <!-- 前图（顶层，带遮罩） -->
      <img
        v-show="showAnimation"
        :src="beforeImage"
        :alt="beforeAlt || '处理前'"
        class="slider-image slider-image--before"
      />

      <!-- 分割线 -->
      <div v-show="showAnimation" class="slider-line">
        <!-- 左右指示器在分割线两侧 -->
        <div v-show="showIndicators" class="slider-indicator slider-indicator--before">{{ beforeIndicator }}</div>
        <div v-show="showIndicators" class="slider-indicator slider-indicator--after">{{ afterIndicator }}</div>
      </div>

      <!-- 效果展示标签 -->
      <div v-show="showAnimation && showTag" class="slider-tag">
        <span class="slider-tag-text">{{ tagText }}</span>
      </div>

      <!-- 左右标签 -->
      <div v-show="showLabels" class="slider-labels">
        <div class="slider-label slider-label--before">{{ beforeLabel }}</div>
        <div class="slider-label slider-label--after">{{ afterLabel }}</div>
      </div>
    </template>

    <!-- 只有一张图片时显示静态图 -->
    <template v-else-if="afterImage || beforeImage">
      <img 
        :src="afterImage || beforeImage" 
        :alt="afterAlt || beforeAlt || '图片'" 
        class="slider-image slider-image--static" 
      />
    </template>

    <!-- 占位符 -->
    <div v-else class="slider-placeholder">
      <div class="placeholder-text">暂无图片</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BeforeAfterSlider',
  props: {
    // 处理前图片
    beforeImage: {
      type: String,
      default: ''
    },
    // 处理后图片
    afterImage: {
      type: String,
      default: ''
    },
    // 图片alt属性
    beforeAlt: {
      type: String,
      default: '处理前'
    },
    afterAlt: {
      type: String,
      default: '处理后'
    },
    // 组件尺寸
    width: {
      type: [String, Number],
      default: '100%'
    },
    height: {
      type: [String, Number],
      default: '280px'
    },
    // 是否显示动画
    showAnimation: {
      type: Boolean,
      default: true
    },
    // 动画持续时间（秒）
    animationDuration: {
      type: Number,
      default: 2.6
    },
    // 是否显示效果标签
    showTag: {
      type: Boolean,
      default: true
    },
    // 标签文字
    tagText: {
      type: String,
      default: '效果展示'
    },
    // 是否显示左右标签
    showLabels: {
      type: Boolean,
      default: false
    },
    // 左右标签文字
    beforeLabel: {
      type: String,
      default: '处理前'
    },
    afterLabel: {
      type: String,
      default: '处理后'
    },
    // 是否显示分割线指示器
    showIndicators: {
      type: Boolean,
      default: true
    },
    // 分割线指示器文字
    beforeIndicator: {
      type: String,
      default: '修图前'
    },
    afterIndicator: {
      type: String,
      default: '修图后'
    },
    // 边框圆角
    borderRadius: {
      type: [String, Number],
      default: '16px'
    }
  },
  computed: {
    containerStyle() {
      const width = typeof this.width === 'number' ? `${this.width}px` : this.width
      const height = typeof this.height === 'number' ? `${this.height}px` : this.height
      const radius = typeof this.borderRadius === 'number' ? `${this.borderRadius}px` : this.borderRadius
      
      return {
        width,
        height,
        borderRadius: radius,
        '--animation-duration': `${this.animationDuration}s`
      }
    }
  },
  emits: ['imageClick'],
  methods: {
    handleClick() {
      this.$emit('imageClick', {
        beforeImage: this.beforeImage,
        afterImage: this.afterImage
      })
    }
  }
}
</script>

<style scoped>
.before-after-slider {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  --animation-duration: 2.6s;
}

/* 图片容器样式 - 基于原始 img-box */
.slider-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
}

/* 前景图片 - 对应原始 img-box__img--after */
.slider-image--before {
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: move-img var(--animation-duration) cubic-bezier(1, 0, 0.4, 1) infinite alternate;
}

.slider-image--static {
  position: relative;
}

/* 分割线 - 使用原始 img-box__line 样式和 changeLine.png */
.slider-line {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  width: 2px;
  height: 100%;
  border-radius: 999px;
  background: url('@/assets/images/slider-effects/changeLine.png') no-repeat center;
  background-size: 2px 100%;
  will-change: right;
  transform: translateZ(0);
  animation: move-line var(--animation-duration) cubic-bezier(1, 0, 0.4, 1) infinite alternate;
}

/* 左右指示器 - 位于底部分割线两侧 */
.slider-indicator {
  position: absolute;
  bottom: 30px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 3;
}

.slider-indicator--before {
  right: 10px;
  animation: text-opacity1 var(--animation-duration) cubic-bezier(1, 0, 0.4, 1) infinite alternate;
}

.slider-indicator--after {
  left: 10px;
  animation: text-opacity2 var(--animation-duration) cubic-bezier(1, 0, 0.4, 1) infinite alternate;
}

/* 效果展示标签 - 基于原始 img-box__tag */
.slider-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 60px;
  height: 20px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.slider-tag-text {
  transform: scale(0.5);
  white-space: nowrap;
  word-break: keep-all;
}

/* 左右标签 */
.slider-labels {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.slider-label {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
}

.slider-label--before {
  animation: label-fade-out var(--animation-duration) cubic-bezier(1, 0, 0.4, 1) infinite alternate;
}

.slider-label--after {
  animation: label-fade-in var(--animation-duration) cubic-bezier(1, 0, 0.4, 1) infinite alternate;
}

/* 占位符 */
.slider-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  color: #6c757d;
  border: 2px dashed #dee2e6;
  border-radius: inherit;
}

.placeholder-text {
  font-size: 14px;
  font-weight: 500;
}

/* 动画定义 - 使用原始动画名称和参数 */
@keyframes move-img {
  0% {
    clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes move-line {
  0% {
    right: 100%;
  }
  100% {
    right: 0%;
  }
}

@keyframes text-opacity1 {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

@keyframes text-opacity2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes label-fade-in {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@keyframes label-fade-out {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .slider-tag {
    top: 4px;
    left: 4px;
    width: 50px;
    height: 18px;
    font-size: 20px;
  }
  
  .slider-tag-text {
    transform: scale(0.45);
  }
  
  .slider-labels {
    bottom: 8px;
    left: 8px;
    right: 8px;
  }
  
  .slider-label {
    font-size: 10px;
    padding: 2px 6px;
  }
  
  .slider-indicator {
    font-size: 10px;
    padding: 3px 6px;
    min-width: auto;
    width: auto;
    height: auto;
  }
}
</style>